<template>
  <div class="content-box bgwhite mt-flex mt-flex-y">
	<div class="ui-header-item gradient">
		<div class="ui-header-arraw prev" @click="handleHistory" @touchstart.stop>
			<i class="iconfont icon iconjiantou-zuo-cuxiantiao"></i>
		</div>
		<div class="ui-header-title">H5支付</div>
		<div class="ui-header-arraw next flex-row align-center" @touchstart.stop @click="handleHome">
			<i class="iconfont icon iconi-home"></i>
		</div>
	</div>
    <div v-if="isShow" class="mt-alipay-arrow" id="alipay-arrow">
        <p class="mt-alipay-text">点击右上角图标，在浏览器内打开进行支付</p>
        <img class="mt-alipay-img-btm" src="~@/assets/images/browser_bottom.png">
        <img class="mt-alipay-img-arrow" src="~@/assets/images/browser_arrow.png">
        <div class="mt-alipay-sure" @click="hideBrowser">我知道了</div>
    </div>
    <div class="ui-mode-content mt-flex-inner mt-flex mt-flex-y bgGray pad-5" >
        <div class="mt-flex-inner mt-alipay-content">
            <div class="mt-alipay-box">
                <p>订单号：<span>{{orderId}}</span></p>
                <p>应支付金额：<span><i class="red">{{price}}</i> 元</span></p>
                <div class="mt-alipay-submit" @click="alipay()">h5支付</div>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
import mixinCommon from '../../mixins/common';
export default {
    name: "category/hpay",
    data() {
        return {
            loading:false,
            orderId:this.$route.query.orderId,
            price:this.$route.query.price,
            isShow:false
        }
    },
    mixins:[
        mixinCommon,
    ],
    created() {
    },
    mounted() {
        this.test()
    },
    methods: {
        test(){
            var that = this
            this.$http.post({
                name:'common.shopping',
                data:{
                    invoke_method:'details_4_order',
                    id_public_goods_order_record:this.orderId
                },
                loading:{
                    enabled:false
                }
            }).then(({result,response})=>{
                if(result.public_goods_order_record.ship_state==0||result.public_goods_order_record.ship_state==1||result.public_goods_order_record.ship_state==3||result.public_goods_order_record.ship_state==4){
                    window.clearInterval(that.int1);
                    that.$router.replace({
                        path: '/front_page_index?redirect=book&index=0',
                    })
                }
            }).catch(({msg})=>{
            });
        },
        alipay() {
            var that = this;
            if (!that.isWeixin) {
                this.$http.post({
                    name:'common.shopping.pay.weichat',
                    data:{
                        invoke_method:'js_api_pay',
                        id_public_goods_order_record:that.orderId,
                        pre_cmd_para_weichat_pay_type:'pay_h5'
                    },
                    loading:{
                        enabled:false
                    }
                }).then(({result,response})=>{
                    that.test();
                    that.int1 = setInterval( function() {
                        that.test();
                    },3000);
                    window.location = result.mweb_url
                })
            }else{
                this.isShow = true;
                this.showMessage('微信环境下不能使用支付宝，请在浏览器中打开此页面');
                return false;
            }
        },
        hideBrowser(){
            this.isShow = false;
        }
    },
    components: {
    }
}
</script>
<style scoped>
.mt-alipay-box{
    padding:1rem .5rem;
}
.mt-alipay-submit{
    margin-top:1rem;
    background:#009FAB;
    text-align:center;
    color:#fff;
    padding:.3rem;
}
.mt-alipay-arrow{
    position:absolute;
    z-index:9999;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding:7rem 4.5rem;
    text-align:center;
    font-size:.9rem;
    line-height:1.5em;
    color:#fff;
    background:rgba(0, 0, 0, .6);
}
.mt-alipay-img-btm{
    position:absolute;
    width:2.29rem;
    height:1.23rem;
    right:0.5rem;
    top:.5rem;
}
.mt-alipay-img-arrow{
    position:absolute;
    width:2.5rem;
    height:3.44rem;
    right:1.5rem;
    top:2.3rem;
}
.mt-alipay-sure{
    margin:.85rem auto;
    width:5rem;
    height:2rem;
    line-height:2rem;
    color:#fff;
    font-size:.75rem;
    border:1px solid #fff;
    border-radius:.27rem;
}
</style>
